<template>
  <div>
    <MyGoodsList :arr="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #mytd="{ row: obj, ind: index }">
        <td>{{ obj.id }}</td>
        <td>{{ obj.goods_name }}</td>
        <td>￥{{ obj.goods_price.toFixed(2) }}</td>

        <!-- tag部分 -->
        <td>
          <input
            @keyup.esc="escFn(obj)"
            v-model="obj.inputValue"
            @keyup.enter="addFn(obj)"
            @blur="obj.inputVisible = false"
            v-focus
            v-if="obj.inputVisible"
            class="tag-input form-control"
            type="text"
          />
          <button
            @click="btn(obj)"
            v-else
            class="btn btn-primary btn-sm add-tag"
          >
            +Tag
          </button>

          <div v-for="tag in obj.tags" :key="tag" class="badge badge-warning">
            {{ tag }}
          </div>
        </td>
        <td>
          <button @click="delFn(index)" class="btn btn-danger btn-sm">
            删除
          </button>
        </td>
      </template>
    </MyGoodsList>
  </div>
</template>

<script>
import MyGoodsList from "../components/MyTable";

export default {
  components: {
    MyGoodsList,
  },
  data() {
    return {
      list: [],
    };
  },
  async created() {
    const res = await this.$axios({
      url: "/api/goods",
    });
    console.log(res);
    this.list = res.data.data;
  },
  methods: {
    // 删除
    delFn(index) {
      this.list.splice(index, 1);
    },
    //点击tag，input框出现，tag隐藏
    btn(obj) {
      obj.inputVisible = true;
    },
    addFn(obj) {
      obj.tags.push(obj.inputValue);
      obj.inputValue = "";
    },
    escFn(obj) {
      obj.inputValue = "";
    },
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style scoped>
.badge {
  margin: 0 3px;
}
</style>